<template>
  <div>
    <top-bar titleShow="true" title="跟投"></top-bar>
    <div class="content followindex">
      <ul class="menu items-aro">
        <li :class="{active: followOrder}" @click="menuCtr('followOrder')">跟牛单</li>
        <li :class="{active: followPeople}" @click="menuCtr('followPeople')">跟牛人</li>
      </ul>
      <!-- 跟牛人 -->
      <ul class="list-container" v-if="followOrder">
        <li>
          <ul class="little-box">
            <li class="align-c">
              稳健性交易：预计最大亏损<i class="gfc-white">10%</i>,最大盈利<i class="gfc-white">20%</i>
            </li>
            <li>
              <ol class="img-txt clearfix">
                <dl><img src="../../assets/head-img.png" height="111" width="111"></dl>
                <dl>
                  <dt>鲍比Bobby</dt>
                  <dd>WISDOM-交易所</dd>
                </dl>
                <dl>
                  <dd>最大亏损<span class="gfc-green">30%</span></dd>
                  <dd>盈亏比<span class="gfc-orange">300%</span></dd>
                </dl>
              </ol>
              <dl class="txt-inline">
                <dd>跟随人数<span class="gfc-white">35</span></dd>
                <dd>跟随金额<span class="gfc-white">3577833</span></dd>
                <dd>近一年化<span class="gfc-white">26%</span></dd>
              </dl>
            </li>
            <li>
              <div class="btn-container items-bet">
                <button>查看详情</button>
                <button>跟随</button>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <ul class="little-box">
            <li class="align-c">
              稳健性交易：预计最大亏损<i class="gfc-white">10%</i>,最大盈利<i class="gfc-white">20%</i>
            </li>
            <li>
              <ol class="img-txt clearfix">
                <dl><img src="../../assets/head-img.png" height="111" width="111"></dl>
                <dl>
                  <dt>鲍比Bobby</dt>
                  <dd>WISDOM-交易所</dd>
                </dl>
                <dl>
                  <dd>最大亏损<span class="gfc-green">30%</span></dd>
                  <dd>盈亏比<span class="gfc-orange">300%</span></dd>
                </dl>
              </ol>
              <dl class="txt-inline">
                <dd>跟随人数<span class="gfc-white">35</span></dd>
                <dd>跟随金额<span class="gfc-white">3577833</span></dd>
                <dd>近一年化<span class="gfc-white">26%</span></dd>
              </dl>
            </li>
            <li>
              <div class="btn-container items-bet">
                <button>查看详情</button>
                <button class="btn-transparent">编辑跟随</button>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <ul class="little-box">
            <li>
              稳健性交易：预计最大亏损10%
            </li>
            <li>
              <ol class="img-txt clearfix">
                <dl><img src="../../assets/head-img.png" height="111" width="111"></dl>
                <dl>
                  <dt>鲍比Bobby</dt>
                  <dd>WISDOM-交易所</dd>
                </dl>
                <dl>
                  <dd>最大亏损<span class="gfc-green">30%</span></dd>
                  <dd>盈亏比<span class="gfc-orange">300%</span></dd>
                </dl>
              </ol>
              <dl class="txt-inline">
                <dd>跟随人数<span class="gfc-white">35</span></dd>
                <dd>跟随金额<span class="gfc-white">3577833</span></dd>
                <dd>近一年化<span class="gfc-white">26%</span></dd>
              </dl>
            </li>
            <li>
              <div class="btn-container items-bet">
                <button>查看详情</button>
                <button class="btn-transparent">取消跟随中</button>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <!-- 跟牛单 -->
      <div class="sort items-aro" v-if="sortShow">
        <span>活动收益率从高到低</span>
        <span>跟随者从高到低</span>
      </div>
      <ul class="list-container" v-if="followPeople">
        <li>
          <ul class="little-box">
            <li>
              <ol class="img-txt clearfix">
                <dl><img src="../../assets/head-img.png" height="111" width="111"></dl>
                <dl>
                  <dt>鲍比Bobby</dt>
                  <dd>WISDOM-交易所</dd>
                </dl>
                <dl>
                  <dd>
                    <button class="btn-detail">查看详情</button>
                  </dd>
                </dl>
              </ol>
              <dl>
                <dd class="items-bet sell">
                  <span class="gfc-orange2">买入</span>
                  <span>EURTRY</span>
                  <span>+39%</span>
                </dd>
              </dl>
              <dl class="follower">
                跟随者 320 <img src="../../assets/follow-img.png" height="81" alt=""><img src="../../assets/follow-img.png"
                                                                                       height="81" alt=""><img
                src="../../assets/follow-img.png" height="81" alt=""><img src="../../assets/follow-img.png" height="81"
                                                                          alt=""><img src="../../assets/follow-img.png"
                                                                                      height="81" alt="">......
              </dl>
            </li>
            <li>
              <div class="btn-container items-bet">
                <button class="btn-1">一键跟单</button>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <ul class="little-box">
            <li>
              <ol class="img-txt clearfix">
                <dl><img src="../../assets/head-img.png" height="111" width="111"></dl>
                <dl>
                  <dt>鲍比Bobby</dt>
                  <dd>WISDOM-交易所</dd>
                </dl>
                <dl>
                  <dd>
                    <button class="btn-detail">查看详情</button>
                  </dd>
                </dl>
              </ol>
              <dl>
                <dd class="items-bet buy">
                  <span class="gfc-green">卖出</span>
                  <span>EURTRY</span>
                  <span>+39%</span>
                </dd>
              </dl>
              <dl class="follower">
                跟随者 320 <img src="../../assets/follow-img.png" height="81" alt=""><img src="../../assets/follow-img.png"
                                                                                       height="81" alt=""><img
                src="../../assets/follow-img.png" height="81" alt=""><img src="../../assets/follow-img.png" height="81"
                                                                          alt=""><img src="../../assets/follow-img.png"
                                                                                      height="81" alt="">......
              </dl>
            </li>
            <li>
              <div class="btn-container items-bet">
                <button class="btn-1">一键跟单</button>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {
        followPeople: false,
        followOrder: true,
        sortShow: false
      }
    },
    components: {
      topBar
    },
    methods: {
      menuCtr: function (menuName) {
        switch (menuName) {
          case "followPeople":
            this.followPeople = true;
            this.followOrder = false;
            this.sortShow = true;
            break;
          case "followOrder":
            this.followOrder = true;
            this.followPeople = false;
            this.sortShow = false;
            break;
        }
      },
      blockBub: function (event) {
        event.stopPropagation();
      },
      myHttp: function (method, url, params, success, error) {
        this.$http({
          method: method,
          url: url,
          params: params,
          headers: {accessToken: this.getToken()}
        }).then(function (res) {
          var data = JSON.parse(res.body);
          console.log(data)
        }, function () {

        })
      }
    },
    mounted(){

    },
  }
</script>

<style scoped>
  .content.followindex {
    font-size: .16rem;
    color: #fff;
  }

  .menu {
    font-size: .18rem;
    color: #fff;
    text-align: center;
    background: #282F37;

  }

  .menu li {
    padding: .2rem 0;
    flex: 1;
    color: #6A747F;
  }

  .menu li.active {
    color: #fff;
    border-bottom: .02rem solid #F25E44;
  }

  .sort {
    margin-top: .1rem;
    padding: .2rem 0;
    background: #282F37;
  }

  ul.list-container > li {
    background: #282F37;
    font-size: .16rem;
    color: #6a747f;
    padding: 0 .18rem;
    margin-top: .1rem;
  }

  ul.little-box > li {
    padding: .2rem 0;
    border-bottom: .01rem solid #6a747f;
  }

  ul.little-box > li:last-child {
    border: none;
  }

  .btn-container {
    overflow: hidden;
  }

  .btn-container button {
    font-size: .18rem;
    background: #F25E44;
    border-radius: .04rem;
    width: 1.5rem;
    height: .4rem;
    line-height: .4rem;
    color: #fff;
  }

  button.btn-detail {
    font-size: .16rem;
    background: #F25E44;
    border-radius: .04rem;
    width: .80rem;
    height: .3rem;
    line-height: .16rem;
    color: #fff;
  }

  button.btn-1 {
    width: 100%;
  }

  button.btn-transparent {
    color: #F25E44;
    border: .01rem solid #F25E44;
    background: rgba(0, 0, 0, 0);
  }

  /* 一行多个文字快 */
  dl.txt-inline {
    padding-top: .2rem;
    display: flex;
    justify-content: space-between;
  }

  dl.txt-inline span {
    padding-left: .1rem;
  }

  /* 图文混排 */
  ol.img-txt dl {
    float: left;
  }

  ol.img-txt dl:nth-child(2) {
    padding-left: .3rem;
  }

  ol.img-txt dl:last-child {
    float: right;
  }

  ol.img-txt dl img {
    border-radius: 50%;
    height: .45rem;
    width: .45rem;
  }

  ol.img-txt dl dt {
    color: #fff;
    line-height: .13rem;
  }

  ol.img-txt dl dd {
    line-height: .13rem;
    padding-top: .2rem;
  }

  ol.img-txt dl dd:first-child {
    padding-top: 0;
  }

  ol.img-txt dl dd span {
    padding-left: .1rem;
  }

  .buy, .sell {
    color: #fff;
    margin-top: .2rem;
    padding: 0 .18rem;
    height: .49rem;
    border-radius: .04rem;
  }

  .buy {
    background: rgba(3, 211, 150, 0.08);
    border: .01rem solid rgba(3, 211, 150, 0.30);
  }

  .sell {
    background: rgba(242, 94, 68, 0.08);
    border: .01rem solid rgba(242, 94, 68, 0.30);
  }

  .sell span, .buy span {
    line-height: .49rem;
  }

  .follower {
    padding: .26rem 0 .06rem 0;
  }

  .follower img {
    width: .27rem;
    height: .27rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: .06rem;
    vertical-align: middle;
  }
</style>
